<template>
  <van-popup
    v-model="show"
    round
    closeable
    position="bottom"
    @close="resetClose"
  >
    <van-cell class="cell-title cell-text" :title="`${title}`"> </van-cell>
    <div class="img-icon-box">
      <van-cell
        v-for="item in dataList"
        :key="item.id"
        :title="item.name"
        :class="{ active: item.id === id }"
        @click="selectId(item.id)"
      >
        <template #right-icon>
          <van-icon name="success" color="#FF6900" class="success-icon" />
        </template>
      </van-cell>
    </div>
    <div class="btn-save-box">
      <van-button @click="select" class="btn-save" type="primary" block
        >确定</van-button
      >
    </div>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      id: undefined,
      clubId: undefined,
      title: "",
      dataList: []
    };
  },
  methods: {
    resetClose() {
      this.id = undefined;
      this.clubId = undefined;
    },
    init(datalist, info) {
      this.dataList = datalist;
      this.title = info.title;
      this.clubId = info.id;
      this.show = true;
    },
    async selectId(id) {
      this.id = id;
    },
    async select() {
      if (!this.id) {
        this.$toast("请选择");
        return;
      }
      this.show = false;
      this.$emit("select", {
        id: this.id,
        clubId: this.clubId,
        title: this.title
      });
    }
  }
};
</script>

<style lang="less" scoped>
.img-icon-box {
  max-height: calc(50vh);
  padding: 0 0px 23px;
  overflow: auto;
}
.btn-save-box {
  padding: 0 40px 23px;
}
.cell-title {
  font-size: 32px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
::v-deep .van-cell {
  align-items: center;
}
::v-deep .van-cell::after {
  border-bottom: 0;
}
.success-icon {
  font-size: 32px;
  display: none;
}
.active {
  color: @color;
  .success-icon {
    display: block;
  }
}
::v-deep .van-popup__close-icon--top-right {
  font-size: 44px;
  color: #666;
}
</style>
